<%--
  Created by IntelliJ IDEA.
  User: zhuya
  Date: 2016/1/28
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="privilege" uri="/WEB-INF/privilege.tld" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>用户注册</title>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'/>">
    <link rel="stylesheet" type="text/css"
          href="<c:url value='/resource/wechat/css/main.css'/>"/>
    <link type="text/css" href="<c:url value='/resource/wx/newcss/common.css'/>" rel="stylesheet"/>

    <script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
    <script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
    <script src="<c:url value='/resource/wechat/js/frozen.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wx/js/common.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wx/js/util.js'/>"></script>
    <script type="text/javascript" src="https://gaapi.jl.gov.cn/web/resource/js/os.analystic-1.1.min.js"></script>
    <script type="text/javascript" src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<style type="text/css">
    .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio) {
        width: 95px;
    }

    .ui-form-item input, .ui-form-item textarea {
        padding-left: 100px
    }

    /*.ui-select{ }*/
</style>
<body class="body_bg" ontouchstart>
<section class="ui-container">
    <section id="tab">
        <div class="demo-item">
            <div class="demo-block">
                <div class="ui-form-item ui-form-item-show ui-border-b bg_fff" style="position: relative;">
                    <label for="#">手机号码：</label>
                    <input type="text" placeholder="" maxlength="11" id="phone" onkeypress="onlyNumber()" value="">
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b bg_fff" style="position: relative;">
                    <label for="#">图片验证：</label>
                    <input type="text" placeholder="" maxlength="4" id="verCode" required value="">
                    <img id="codeImg" src="" onclick="getImg()"
                         style="position: absolute; top: 4px; right: 10px; width: 75px; height: 36px;">

                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
                    <label><span class="text_white">验</span>验证码：</label>
                    <input type="text" placeholder="" maxlength="6" id="validateCode" value="">
                    <button id="btnSendCode" class="ui-btn" style="position: absolute; top: 8px; right: 10px;">
                        获取手机验证码
                    </button>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
                    <label><span class="text_white">密码</span>密码：</label>

                    <input type="password" placeholder="6-20位字母、数字组成" id="password" maxlength="16" value="">
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
                    <label for="#">确认密码：</label>
                    <input type="password" placeholder="" id="reappassword" maxlength="16" value="">
                </div>

                <div style="clear: both"></div>
                <div class="ui-btn-wrap">
                    <button class="ui-btn-lg ui-btn-primary" id="perRegister">
                        注册
                    </button>
                </div>

            </div>
            <script class="demo-script">
            </script>
        </div>
    </section>
</section>

<script>
    var genGuid;
    $(function () {
        getImg();
    });
    function getImg() {
        genGuid = newGuid().ToString("D");
        $.ajax({
            url: '<c:url value="/api/code/get/'+ genGuid +'" />',
            type: 'get',
            dataType: 'json',
            success: function (resp) {
                if (resp && resp.succ) {
                    $("#codeImg").attr("src", "data:image/png;base64," + resp.data)
                } else {
                    alert(resp.msg);
                }
            }
        });
    }

    function onlyNumber() {
        if ((event.keyCode < 48) || (event.keyCode > 57 )) event.returnValue = false;
    }

    var secs = 300;
    $("#btnSendCode").click(function () {
        var phone = $("#phone").val();
        if (phone.length != 11) {
            toast("请输入正确的手机号码", 2000);
            return;
        }
        var verCode = $("#verCode").val();
        if (!verCode) {
            toast("图片验证码不能为空", 2000);
            return;
        }

        getSms(phone, verCode);

    });

    function update(num) {
        if (num == secs) {
            $("#btnSendCode").text("发送验证码");
            $("#btnSendCode").removeAttr("disabled");
        }
        else {
            var printnr = secs - num;
            $("#btnSendCode").text(printnr + "秒失效");
        }
    }

    $("#comSms").click(function () {
        var phone = $("#mobile").val();
        if (phone.length != 11) {
            toast("请输入正确的手机号码", 2000);
            return;
        }

        var verCode = $("#verCode").val();
        if (!verCode) {
            toast("图片验证码不能为空", 2000);
            return;
        }

        getSms(phone);
    });

    /**
     * 获取验证短信
     * @param phone
     * @param verCode
     */
    function getSms(phone, verCode) {
        $.ajax({
            url: '<c:url value="/api/sms/sendCode" />',
            type: 'post',
            dataType: 'json',
            data: {"tel": phone, "verCode": verCode, "verCodeKey": genGuid},
            success: function (resp) {
                toast(resp.msg, 2000);
                if(resp.succ) {
                    $("#btnSendCode").attr("disabled", "true");
                    for (var i = 1; i <= secs; i++) {
                        window.setTimeout("update(" + i + ")", i * 1000);
                    }
                }

            }
        });
    }


    $("#perRegister").click(function () {
        submitForm();
    });


    function submitForm() {
        var url = "<c:url value='/api/profile/wx_register'/>";
        if (checkForm()) {
//            var isPer = $("input[name='isPer']:checked").val();
            var str = '{"userSrc":"WEI","password":"' + $("#password").val() + '","mobile":"' + $("#phone").val() + '","validateCode":"' + $("#validateCode").val() + '","openId":"${openId}"}';

            $("#perRegister").attr("disabled", "disabled");
            $.ajax({
                url: url,
                dataType: "json",
                data: str,
                type: "post",
                contentType: "application/json;charset=utf-8",
                success: function (resp, status, xhr) {
                    <%--window.location.href="<c:url value='/weixin/wx_member/index'/>";--%>
                    if (resp.succ) {
                        if (212001 == resp.statusCode) {
                            <%--window.location.href="<c:url value='/weixin/wx_member/index'/>";--%>
                            if ("${gowhere}" == "") {
                                toast("注册成功！", 2000);
                                window.location.href = "<c:url value='/weixin/wx_member/index'/>";
                            } else {
                                window.location.href = "<c:url value='${gowhere}'/>";
                            }
                        } else if (2001 == resp.statusCode) {
                            alert("2001！");
                        } else {
                            alert(resp.msg);
                        }
                    } else {
                        $("#perRegister").attr("disabled", false);
                        toast("注册失败 " + resp.msg, 2000);
                        return false;
                    }
                },
                error: function () {
                }
            });
            return false;
        }
    }
    function checkForm() {


        if ($("#phone").val().length != 11) {
            toast("请输入11位手机号！", 2000);
            return false;
        }

        if ($("#validateCode").val() == "") {
            toast("请输入验证码！", 2000);
            return false;
        }

        if ($("#password").val() == "") {
            toast("请输入密码！", 2000);
            return false;
        }

        if ($("#reappassword").val() == "") {
            toast("请输入确认密码！", 2000);
            return false;
        }
        /*if(!/^[0-9A-Za-z]{6,20}$/.test($("#reappassword").val())){
         alert("密码只能包含6-20位的字母或数字");
         return false;
         }*/
        if ($("#reappassword").val() != $("#password").val()) {
            toast("两次输入密码不一致！", 2000);
            return false;
        }

        return true;

    }

    function showToast(msg, duration) {
        var _toast = $("#toast");
        if (_toast.is(":hidden")) {
            _toast.empty().html(msg).addClass("show");
            setTimeout(function () {
                $("#toast").removeClass("show");
            }, duration ? duration : 4000);
        }
    }
</script>
</body>
</html>
